<template>
	<div class="product">
		<div class="div-top">
			<img src="../../assets/product/zuo.png" />
			<div class="mian-search">
				<img src="../../assets/product/sousuo.png" />
				<p>请输入商品名称搜索</p>
			</div>
		</div>
		<div class="dianpu">
			<img src="../../assets/product/pinpai1.png" />
			<div class="content">
				<p>沃尔玛</p>
				<div class="xiangqing">
					<p>月售1万+</p>
					<p>起送¥0</p>
					<p>基础运费¥5</p>
				</div>
				<div class="vip">
					<span>VIP尊享满89元减4元运费券（每月3张）</span>
				</div>
			</div>
		</div>
		<div class="quanbu">
			<div class="llist">
				<p>全部商品</p>
				<ul>
					<li>秒杀</li>
					<li>新鲜水果</li>
					<li>休闲食品</li>
					<li>时令蔬菜</li>
					<li>肉蛋家禽</li>
				</ul>
			</div>
			<div class="plist">
				<div class="products" v-for="item in prlist">
					<div class="p_img">
						<img :src="item.url" />
					</div>
					<div class="soles" style="flex: 1;">
						<div class="jg1">
							<p>{{item.danjia}}</p>
							<p>{{item.num}}</p>
						</div>
						<div class="jg2">
							<div class="g2_jg">
								<p>{{item.newprice}}</p>
								<p>{{item.oldprice}}</p>
							</div>
							<div class="jg2_an">
								<img :src="item.a" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="shop_bottom">
			<img src="../../assets/product/gouwulan2.png" />
			<p>购物车是空的</p>
			<p>去结算</p>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				prlist: [{
						url: require("../../assets/product/fanqie.png"),
						danjia: "番茄250g/份",
						num: "月售10件",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						a: require("../../assets/product/jia.png")
					},
					{
						url: require("../../assets/product/yingtao.png"),
						danjia: "樱桃250g/份",
						num: "月售10件",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						a: require("../../assets/product/jia.png")
					}, {
						url: require("../../assets/product/pangxie.png"),
						danjia: "螃蟹250g/份",
						num: "月售10件",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						a: require("../../assets/product/jia.png")
					}, {
						url: require("../../assets/product/chengzi.png"),
						danjia: "香橙250g/份",
						num: "月售10件",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						a: require("../../assets/product/jia.png")
					}
				]
			}
		}
	}
</script>
<style scoped>
	.div-top {
		margin-top: 16px;
		display: flex;
		padding-left: 18.5px;
		padding-right: 18px;
		align-items: center;
	}

	.div-top img {
		width: 12.3px;
		height: 21.2px;
		padding-right: 16.2px;
	}

	.mian-search {
		height: 32px;
		background: #f5f5f5;
		border-radius: 16px;
		flex: 15;
		display: flex;
		align-items: center;
	}

	.mian-search img {
		width: 16px;
		height: 16px;
		padding-right: 12px;
		padding-left: 16px;
	}

	.mian-search p {
		font-size: 14px;
		color: #333333;
		line-height: 16px;
	}

	.dianpu {
		display: flex;
		padding-left: 8px;
		padding-bottom: 24px;
		padding-top: 16px;
	}

	.dianpu img {
		width: 56px;
		height: 56px;
		padding-right: 16px;
	}

	.content p {
		font-size: 16px;
		color: #333333;
		padding-bottom: 8px;
	}

	.xiangqing {
		display: flex;
	}

	.xiangqing p {
		padding-right: 16px;
		font-size: 13px;
		color: #333333;
		padding-bottom: 8px;
	}

	.content .vip span {
		font-size: 13px;
		color: #E93B3B;
	}

	.quanbu {
		display: flex;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.llist {
		background: #F5F5F5
	}

	.llist p {
		background: #FFFFFF;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 12px;
		padding-top: 12px;
		border-radius: 2px;
	}

	.llist ul {
		list-style: none;
		width: 100%;
		padding-top: 12px;
	}

	.llist li {
		height: 40px;
		border-radius: 2px;
		text-align: center;
	}

	.plist {
		flex: 5;
		background: #FFFFFF;
	}

	.products {
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 12px;
		margin-left: 16px;
		margin-right: 16px;
		display: flex;
	}

	.p_img img {
		width: 68px;
		height: 68px;
		padding-right: 16px;
	}

	.jg1 :nth-child(1) {
		font-size: 14px;
		color: #ff5500;
		padding-bottom: 6px;
	}

	.jg1 :nth-child(2) {
		font-size: 12px;
		color: #333333;
		line-height: 16px;
		padding-bottom: 6px;
	}

	.jg2 {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.g2_jg {
		display: flex;
		align-items: center;
	}

	.g2_jg :nth-child(1) {
		font-size: 14px;
		color: #E93B3B;
		padding-right: 12px;
	}

	.g2_jg :nth-child(2) {
		font-size: 10px;
		color: #999999;
		text-decoration: line-through;
	}

	.jg2_an {
		display: flex;
	}

	.shop_bottom {
		background: #FFFFFF;
		height: 49px;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #F1F1F1;
	}

	.shop_bottom img {
		height: 26px;
		margin-left: 24px;
	}

	.shop_bottom :nth-child(2) {
		font-size: 12px;
		padding-left: 32px;
		color: #333333;
		flex: 1;
	}

	.shop_bottom :nth-child(3) {
		font-size: 14px;
		color: #FFFFFF;
		background-color: #1FA4FC;
		padding: 14px 28px 14px 28px;
	}
</style>
